<template>
  <div class="login-container">
    <el-form class="login-form" ref="loginFromRef" :model="loginForm" :rules="loginRules">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>

      <el-form-item prop="username">
        <el-input placeholder="账号" name="username" type="text" :prefix-icon="User" v-model="loginForm.username">
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input placeholder="密码" name="password" :prefix-icon="Lock" :show-password="true" v-model="loginForm.password"></el-input>
        <!--        <el-image style="width: 15px;height: 8px" :src="eye"></el-image>-->
      </el-form-item>

      <el-button type="primary" style="width: 100%; margin-bottom: 30px" :loading="loading" @click="handleLogin">登录</el-button>


    </el-form>
  </div>
</template>
<script setup>
import {User, Lock} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {validatePassword} from "./rules.js";
import { useStore } from "vuex"

const eye = ref('')
eye.value = '../src/icons/svg/eye.svg'

const loginForm = ref({
  username: 'admin',
  password: '12345'
})

const loginRules = ref({
  username: [
    {
      required: true,
      trigger: "blur",
      message: "用户名为必填"
    }
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      validator: validatePassword()
    }
  ],
})

const loading = ref(false)
const loginFromRef = ref(null)
const store = useStore()
const handleLogin = () => {
  loginFromRef.value.validate(valid => {
    if (!valid) return

    loading.value = true
    store
    .dispatch("user/login", loginForm.value)
    .then(() => {
      loading.value = false
      //TODO 登录后跳转到后台
    })
    .catch(err => {
      console.log(err)
      loading.value = false
    })
  })
}
</script>

<style lang="scss">
  .login-container {
    margin: 200px auto;
    text-align: center;
    width: 25%;
  }
</style>